@import 'tailwindcss';
@import 'tw-animate-css';
@plugin 'tailwind-scrollbar';
@plugin '@tailwindcss/typography';

@custom-variant dark (&:is(.dark *));

@theme {
  --font-sans:
    'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  --font-serif: 'Merriweather', 'Georgia', serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Q弹动画缓动函数 */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-bounce-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-slow-breath: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 全局滚动条样式优化 */
::-webkit-scrollbar {
  width: 3px; /* 垂直滚动条宽度（变纤细） */
  height: 3px; /* 水平滚动条高度 */
}

/* 滚动条轨道背景 */
::-webkit-scrollbar-track {
  background: transparent; /* 透明轨道，减少视觉干扰 */
  border-radius: 1px; /* 轨道圆角，与滚动条匹配 */
}

/* 滚动条滑块（可拖动部分） */
::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5); /* 浅灰色半透明 */
  border-radius: 1px; /* 滑块圆角，更圆润 */
  transition: background-color 0.2s ease; /* hover时平滑过渡 */
}

/* 滚动条滑块hover状态 */
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(107, 114, 128, 0.7); /* 加深颜色，提升交互感 */
}

/* 滚动条角落（水平+垂直滚动条交汇处） */
::-webkit-scrollbar-corner {
  background: transparent; /* 透明处理，避免出现方块 */
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb {
    background-color: rgba(75, 85, 99, 0.5); /* 深色模式下的滑块颜色 */
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(107, 114, 128, 0.7); /* 深色模式hover颜色 */
  }
}

/* 为滚动容器添加过渡效果（可选） */
.scroll-smooth {
  scroll-behavior: smooth;
}

/* ResizablePanel Q弹动画 */
[data-slot='resizable-panel'] {
  transition:
    flex-basis 0.5s var(--ease-bounce),
    flex-grow 0.5s var(--ease-bounce),
    width 0.5s var(--ease-bounce),
    opacity 0.3s ease-in-out;
}

/* 面板内容的淡入淡出效果 */
[data-slot='resizable-panel'] > * {
  transition: opacity 0.3s ease-in-out;
}

/* 自定义阴影 */
.shadow-active {
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
}

/* Popover 动画 */
@keyframes slideUpAndFade {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideRightAndFade {
  from {
    opacity: 0;
    transform: translateX(-2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideDownAndFade {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeftAndFade {
  from {
    opacity: 0;
    transform: translateX(2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.popover-content {
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.popover-content[data-state='open'][data-side='top'] {
  animation-name: slideDownAndFade;
}

.popover-content[data-state='open'][data-side='right'] {
  animation-name: slideLeftAndFade;
}

.popover-content[data-state='open'][data-side='bottom'] {
  animation-name: slideUpAndFade;
}

.popover-content[data-state='open'][data-side='left'] {
  animation-name: slideRightAndFade;
}

/* 手写光标闪烁动画 */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.animate-cursor-blink {
  animation: cursor-blink 1.2s var(--ease-slow-breath) infinite;
}

/* 缓慢呼吸浮动动画 */
@keyframes float-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.animate-float-breathe {
  animation: float-breathe 6s ease-in-out infinite;
}

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --radius: 0.625rem;
  /* 奶油灰背景 #F5F5F0 */
  --background: oklch(0.96 0.01 90); 
  /* 温柔浅墨文字 #2C2C2C */
  --foreground: oklch(0.25 0.01 0);
  
  --card: oklch(0.98 0.005 90);
  --card-foreground: oklch(0.25 0.01 0);
  
  --popover: oklch(0.98 0.005 90);
  --popover-foreground: oklch(0.25 0.01 0);
  
  --primary: oklch(0.35 0.02 0);
  --primary-foreground: oklch(0.98 0.01 90);
  
  --secondary: oklch(0.94 0.01 90);
  --secondary-foreground: oklch(0.35 0.02 0);
  
  --muted: oklch(0.94 0.01 90);
  --muted-foreground: oklch(0.55 0.01 0);
  
  --accent: oklch(0.94 0.01 90);
  --accent-foreground: oklch(0.35 0.02 0);
  
  --destructive: oklch(0.577 0.245 27.325);
  
  --border: oklch(0.90 0.01 90);
  --input: oklch(0.90 0.01 90);
  --ring: oklch(0.70 0.01 90);
  
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  
  --sidebar: oklch(0.97 0.01 90);
  --sidebar-foreground: oklch(0.25 0.01 0);
  --sidebar-primary: oklch(0.35 0.02 0);
  --sidebar-primary-foreground: oklch(0.98 0.01 90);
  --sidebar-accent: oklch(0.94 0.01 90);
  --sidebar-accent-foreground: oklch(0.35 0.02 0);
  --sidebar-border: oklch(0.90 0.01 90);
  --sidebar-ring: oklch(0.70 0.01 90);
}

.dark {
  /* 深色模式：墨色背景 */
  --background: oklch(0.15 0.01 0);
  /* 纸白文字 */
  --foreground: oklch(0.92 0.01 90);
  
  --card: oklch(0.20 0.01 0);
  --card-foreground: oklch(0.92 0.01 90);
  
  --popover: oklch(0.20 0.01 0);
  --popover-foreground: oklch(0.92 0.01 90);
  
  --primary: oklch(0.90 0.01 90);
  --primary-foreground: oklch(0.15 0.01 0);
  
  --secondary: oklch(0.25 0.01 0);
  --secondary-foreground: oklch(0.92 0.01 90);
  
  --muted: oklch(0.25 0.01 0);
  --muted-foreground: oklch(0.70 0.01 90);
  
  --accent: oklch(0.25 0.01 0);
  --accent-foreground: oklch(0.92 0.01 90);
  
  --destructive: oklch(0.704 0.191 22.216);
  
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  
  --sidebar: oklch(0.20 0.01 0);
  --sidebar-foreground: oklch(0.92 0.01 90);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground antialiased;
  }
}

@layer utilities {
  .bg-paper-texture {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  }
  
  .dark .bg-paper-texture {
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  }

  .text-letterpress {
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
  }
  
  .dark .text-letterpress {
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
  }
  
  /* 柔化阴影 */
  .shadow-paper-sm {
    box-shadow: 1px 1px 2px rgba(0,0,0,0.03), 2px 2px 6px rgba(0,0,0,0.03);
  }
  
  .shadow-paper-md {
    box-shadow: 1px 1px 2px rgba(0,0,0,0.03), 4px 4px 12px rgba(0,0,0,0.03);
  }
  
  .shadow-paper-lg {
    box-shadow: 2px 2px 4px rgba(0,0,0,0.03), 8px 8px 24px rgba(0,0,0,0.03);
  }

  .paper-edge-tear {
    clip-path: polygon(
      0% 0%, 
      100% 0%, 
      100% 100%, 
      95% 99%, 90% 100%, 85% 99%, 80% 100%, 75% 99%, 70% 100%, 65% 99%, 60% 100%, 
      55% 99%, 50% 100%, 45% 99%, 40% 100%, 35% 99%, 30% 100%, 25% 99%, 20% 100%, 
      15% 99%, 10% 100%, 5% 99%, 0% 100%
    );
  }
  
  .font-handwriting {
    font-family: 'Caveat', 'Kalam', 'Patrick Hand', cursive;
  }
}

/* Tiptap Editor Styles */
.ProseMirror {
  outline: none;
}

.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #9ca3af;
  pointer-events: none;
  height: 0;
}

.dark .ProseMirror p.is-editor-empty:first-child::before {
  color: #6b7280;
}

/* ContentEditable Placeholder Styles */
[contenteditable][data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
  position: absolute;
}

.dark [contenteditable][data-placeholder]:empty::before {
  color: #6b7280;
}

/* Prose Styles for Editor */
.prose {
  color: #374151;
}

.prose h1 {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 2.5rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: #111827;
}

.prose h2 {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 2.25rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #111827;
}

.prose h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: #111827;
}

.prose p {
  font-size: 1rem;
  line-height: 2rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

.prose strong {
  font-weight: 600;
  color: #111827;
}

.prose em {
  font-style: italic;
}

.prose u {
  text-decoration: underline;
}

/* Dark mode prose styles */
.dark .prose {
  color: #d1d5db;
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3 {
  color: #f9fafb;
}

.dark .prose strong {
  color: #f9fafb;
}

/* 输入框滚动条样式 - 更细更淡 */
.input-area-scrollbar::-webkit-scrollbar {
  width: 2px; /* 更细的滚动条 */
  height: 2px;
}

.input-area-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.input-area-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.3);
  border-radius: 1px;
  transition: background-color 0.2s ease;
}

.input-area-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.5);
}

@media (prefers-color-scheme: dark) {
  .input-area-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(75, 85, 99, 0.3);
  }
  .input-area-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(75, 85, 99, 0.5);
  }
}

::view-transition-old(root) {
  z-index: 1;
  animation: none;
}

::view-transition-new(root) {
  z-index: 9999;
  animation: circle-expand 0.6s ease-in-out;
}

@keyframes circle-expand {
  from {
    clip-path: circle(0px at var(--x, 50%) var(--y, 50%));
  }
  to {
    clip-path: circle(var(--r, 100vmax) at var(--x, 50%) var(--y, 50%));
  }
}
